<template>
  <div id="goods">
    <van-loading size="24px" vertical type="spinner" v-if="loading_01 && !goodsList.length"
      >拼命加载中...</van-loading
    >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的～"
      @load="onLoad"
      :immediate-check="false"
      v-if="!isNodata" 
      ref="boxEl"
    >
      <!-- <van-pull-refresh v-model="refreshing" -->
      <!-- @refresh="onRefresh"> -->
      <template v-for="(item) in goodsList">
        <van-swipe-cell :key="item.proId" class="list_item_box" :before-close="beforeClose" :name="item.proId">
          <div
            class="box"
            @click="goodsdetails(item.proId)"
          >
            <div class="cover_box" >
              <img :src="item.proLogo" :onerror="defaultImg"/>
            </div>
            <div class="right">
              <div class="wid">
                <p class="title">
                  {{ item.proTitle }}
                </p>
              </div>
              <p class="price"><span>￥</span>{{ item.proPrice }}</p>
              <div class="bottom">
                <div>
                  <p>{{ format_num(item.volume) }}</p>
                  <span>昨日总销量</span>
                </div>
                <div>
                  <p>{{ format_num(item.amount) }}</p>
                  <span>昨日总销售额</span>
                </div>
                <div>
                  <p>{{ formatRate(item.commissionRate, 2, 2) }}</p>
                  <span>佣金率</span>
                </div>
              </div>
            </div>
          </div>
          <template #right>
            <div class="cancel_collect"></div>
          </template>
        </van-swipe-cell>
      </template>
      <!-- </van-pull-refresh> -->
    </van-list>
    <div v-else class="nodata">
      <img class="img" src="@/assets/three/noData.png" alt="" />
      <p class="Collection">您尚未收藏任何商品</p>
    </div>
  </div>
</template>

<script>
import errorImg from '@/assets/img/shop.png'; //图片
export default {
  props: {},
  data() {
    return {
      goodsList: [],
      page: 1,
      pageSize: 8,
      //触底
      loading: false, //是否处于加载状态
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      refreshing: false, //是否处于加载状态
      isNodata: false,
      loading_01: false,
      errorImg:errorImg,
      isCloseConfirm:true,
    };
  },
  computed: {
        // 显示头像默认图片
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    }
  },
  created() {},
  mounted() {
    this.GetGoodsList();
  },
  methods: {
    beforeClose({position,instance,name}){  //取消收藏
      if(position == 'right'){
        this.isCloseConfirm = false;
        this.$dialog.confirm({
          message: '确认取消收藏？',
        }).then(() => {
          this.cancelStar(name).then(()=>{
            instance.$el.style.opacity = '0';
            instance.$el.style.height = '0';
            setTimeout(()=>{
              instance.close();
              this.goodsList = this.goodsList.filter((item)=>{
                return item.proId != name;
              });
              this.isNodata = !this.goodsList.length;

              let boxEl = this.$refs.boxEl.$el; //列表容器
              let elH = boxEl.clientHeight; //列表容器高度
              let elTop = boxEl.offsetTop;  //列表容器距离顶部高度
              let winH = this.$getClientHeight(); //窗口高度
              let itemElH = instance.$el.clientHeight;
              if(elH <= winH-elTop+itemElH*2 && !this.finished){ //滑动取消到容器高度不足 一屏外加两个子元素项容器的高度时，加载下一页
                console.log(1231);
                this.page += 1;
                this.GetGoodsList();
              }
            },200);
            this.isCloseConfirm = true;
          });
        }).catch((res)=>{
          this.isCloseConfirm = true;
          instance.close();
          // console.log(res);
        });
      }else if(position == 'outside' && this.isCloseConfirm){ //有确认弹框的时候不能隐藏
        instance.close();
      }
    },
    // 取消收藏
    cancelStar(goodsId) {
      return new Promise((resolve, reject)=>{
        let that = this;
        that.$axios
          .post('/api/collection/CancelCollection',
            { 
              CollectId: goodsId,
              Module: 5 //模块 1达人 2视频 3音乐 4话题 5商品
            }
          )
          .then(res => {
            if (res.data.code == 0) {
              resolve();
            }
          })
          .catch(err => {
            reject();
            console.log(err);
          });
      })
    },
    // 跳转商品详情
    goodsdetails(id) {
      this.$router.push({ path: "/goodsDetailsMain", query: { id } });
    },
    //调取接口
    GetGoodsList() {
      this.loading_01 = true;
      this.$axios
        .get("/api/collection/GetProductCollection", {
          params: {
            pageIndex: this.page,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.goodsList = this.goodsList.concat(res.data.data);
            // console.log(res.data.data);
            this.loading = false;
            this.refreshing = false;
            this.loading_01 = false;
            if (!res.data.data.length || res.data.data.length < this.pageSize) {
              this.finished = true;
            }
          } else if (res.data.code == 1002) {
            this.loading = false;
            this.isNodata = true;
            this.loading_01 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //触底
    onLoad() {
      this.loading = true;
      // if (this.page * this.pageSize > this.goodsList.length) {
      //   if (this.goodsList.length == 0) {
      //     this.loading = false;
      //     this.finished = false;
      //   } else {
      //     this.loading = false;
      //     this.finished = true;
      //   }
      // } else if (this.goodsList.length > 0) {
      //   this.page = this.page + 1;
      //   this.GetGoodsList();
      // }
      if(!this.finished){
        this.page = this.page + 1;
        this.GetGoodsList();
      }
    },
    //上拉刷新
    onRefresh() {
      // 清空列表数据
      // this.finished = true;
      this.page = 1;
      this.goodsList = [];
      this.GetGoodsList();
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.list_item_box{
  // height: 2.266667rem;
  height: 2.68rem;
  border-radius: 0.133333rem;
  background-color: #ffffff;
  margin-bottom: 0.2rem;
  overflow: hidden;
  transition: all linear 200ms;
  opacity: 1;
}
#goods {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 .2667rem;
  .van-list{
    width: 100%;
  }
  .box {
    background-color: #ffffff;
    border-radius: 0.133333rem;
    display: flex;
    margin-bottom: 0.186667rem;
    .cover_box{
      width: 2.133333rem;
      height: 2.133333rem;
      // background-color: #ff7500;
      border-radius: .266667rem;
      border: solid 1px #e5e5e5;
      margin-top: .293333rem;
      margin: .266667rem;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .right{
      flex: 1;
    }
  }
  .cancel_collect{
    display: flex;
    width: 1.9733rem;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #fd7f2c;
    &:after{
      content: '';
      width: .4533rem;
      height: .5333rem;
      background-image: url('~@/assets/img/collect_delete.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 6.28rem;
    // height: 0.4rem;
    font-size: 0.4rem;
    line-height: 0.48rem;
    letter-spacing: 0px;
    color: #222222;
    margin-top: 0.266667rem;
  }
  .price {
    font-family: Dinpro-medium;
    height: 0.733333rem;
    font-size: 0.48rem;
    /* font-weight: 600; */
    line-height: 0.933333rem;
    letter-spacing: 0px;
    color: #ff0000;
    // margin-top: 0.066667rem;
    // margin-bottom: 0.066667rem;
  }
  .price > span {
    font-size: 0.346667rem;
    color: #ff0000;
  }
  .bottom{
    display: flex;
    justify-content: space-between;
    padding-left: .0533rem;
    padding-right: .3333rem;
  }
  .bottom div {
    // width: 2rem;
    // height: 0.72rem;
    font-size: 0.373333rem;
    color: #222222;
    display: inline-block;
    // text-align: center;
  }
  .bottom div span {
    font-size: 0.293333rem;
    color: #888888;
  }
  .bottom div p {
    font-family: Dinpro-medium;
  }
  .van-pull-refresh {
    overflow: auto;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .img {
    width: 4rem;
    height: 3.2rem;
    margin-top: 4rem;
    display: block;
  }
  .Collection {
    font-size: 0.373333rem;
    line-height: 0.4rem;
    color: #888888;
    text-align: center;
  }
}
</style>
